<template>
  <div>
    <div class="cont_top">
      <Head
        school="imgdata"
        title="用户信息"
        xs="1"
        fh="1"
        icon=""
        bgcolor="0"
      />
      <div class="user">
        <div>
          <img :src="datauser.imgurl" alt="" />
        </div>
        <div>
          <p>{{ datauser.username }}</p>
          <span>自由职业者</span>
        </div>
      </div>
    </div>
    <div class="cont_btn">
      <div @click="gai('足迹')" :class="{ change: zt == '足迹' }">
        <span>足迹</span>
      </div>
      <div @click="gai('相册')" :class="{ change: zt == '相册' }">
        <span>相册</span>
      </div>
    </div>
    <div class="cont_body">
      <div class="zuji" v-if="zt == '足迹'">
        <div>
          <div class="imgurl">
            <img :src="datauser.url" alt="" />
          </div>
          <div class="txt">断剑重铸之日,骑士归来之时!</div>
          <div class="usrename">
            <div>
              <img :src="datauser.imgurl" alt="" />
            </div>
            <p>{{ datauser.username }}</p>
          </div>
        </div>
        <div>
          <div class="imgurl">
            <img :src="datauser.url" alt="" />
          </div>
          <div class="txt">
            尽量简化你的生活，你会发现那些被挡住的风景，才是最适宜的人生。
          </div>
          <div class="usrename">
            <div>
              <img :src="datauser.imgurl" alt="" />
            </div>
            <p>{{ datauser.username }}</p>
          </div>
        </div>
        <div>
          <div class="imgurl">
            <img :src="datauser.url" alt="" />
          </div>
          <div class="txt">
            当你鼓起勇气，下定决心忠于自己，每一天都将是最好的状态。
          </div>
          <div class="usrename">
            <div>
              <img :src="datauser.imgurl" alt="" />
            </div>
            <p>{{datauser.username}}</p>
          </div>
        </div>
        <div>
          <div class="imgurl">
            <img :src="datauser.url" alt="" />
          </div>
          <div class="txt">生活不会惯着你，想要不被抛弃，必须自己争气。</div>
          <div class="usrename">
            <div>
              <img :src="datauser.imgurl" alt="" />
            </div>
            <p>{{ datauser.username}}</p>
          </div>
        </div>
      </div>
      <div class="xiangce" v-if="zt == '相册'">
        <div>
          <ul>
            <li v-for="value in dataimg" :key="value.id">
              <div>
                <img :src="value.imgurl" alt="" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="btn" @click="change" :class="{gaibian:flag == true}">
      <span v-if="flag == false">关注TA</span>
      <span v-if="flag == true">已关注</span>
    </div>
  </div>
</template>
<script>
import Head from "../../components/Fb_body/Head.vue";
export default {
  components: {
    Head,
  },
  data() {
    return {
      zt: "足迹",
      datauser: [],
      dataimg: [],
      flag:false,

    };
  },
  methods: {
    gai(val) {
      this.zt = val;
    },
    change(){
        this.flag = !this.flag;
    }
  },
  mounted() {
    //判断
    if (this.$store.state.id == 0) {
      //   alert("没有用户数据")
      //   this.$router.push({name:"Home"});
      //   return;
    }
    //足迹
    this.ajax({
      method: "post",
      url: "/queryAll",
      data: {
        id: this.$store.state.id,
      },
    }).then((res) => {
      this.datauser = res.data[0];
      // console.log(this.datauser.username);
    });
    //相册
    this.ajax({
      method: "get",
      url: "/queryAllimg",
    }).then((res) => {
      this.dataimg = res.data;
      // console.log(this.dataimg);
    });
  },
};
</script>
<style scoped lang="scss">
.cont_top {
  background-image: url("https://img2.baidu.com/it/u=3246628741,3439955235&fm=26&fmt=auto");
  background-size: 100% 100%;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  > .user {
    display: flex;
    align-items: center;
    padding: 10px;
    > div:nth-of-type(1) {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-left: 15px;
      > img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        cursor: pointer;
      }
    }
    > div:nth-of-type(2) {
      margin-left: 15px;
      > p {
        font-size: 28px;
        cursor: pointer;
      }
      > span {
        color: gray;
      }
    }
  }
}
.cont_btn {
  width: 100%;
  //   background-color: greenyellow;
  display: flex;
  height: 65px;
  box-shadow: 0px 2px 5px gray;
  > div {
    width: 50%;
    height: 63px;
    // background-color: indianred;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    color: grey;
    &:nth-of-type(1) {
      border-right: 1px solid rgba(128, 128, 128, 0.301);
      //   background-color: green;
      line-height: 60px;
    }
  }
}
.cont_body {
  padding: 8px;
  overflow: scroll;
  height: 483px;
  background-color: #f1f1f1;
  > .zuji {
    //
    display: flex;
    flex-wrap: wrap;
    > div {
      margin-right: 9px;
      margin-left: 3.6px;
      height: 280px;
      width: 185px;
      box-shadow: 0px 2px 5px gray;
      border-radius: 5px;
      margin-top: 10px;
      background-color: rgba(255, 255, 255, 0.822);
      > .imgurl {
        width: 185px;
        height: 165px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        > img {
          width: 185px;
          height: 155px;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
        }
      }
      > .txt {
        padding: 7px;
        font-size: 14px;
        height: 60px;
      }
      > .usrename {
        width: 100%;
        height: 41px;
        // background-color: cadetblue;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top: 1px solid rgba(128, 128, 128, 0.651);
        display: flex;
        align-items: center;
        > div:nth-of-type(1) {
          padding: 10px;
          > img {
            margin-top: 5px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
          }
        }
        > p {
          //   margin-top: 5px;
          font-size: 12px;
          font-weight: bold;
        }
      }
      &:nth-of-type(even) {
        height: 319px;
        > .imgurl {
          height: 190px;
          > img {
            height: 190px;
          }
        }
        > .txt {
          padding: 7px;
          font-size: 14px;
          height: 74px;
          //   background-color: yellow;
        }
        > .usrename {
          width: 100%;
          height: 41px;
          //   background-color: cadetblue;
          border-top: 1px solid rgba(128, 128, 128, 0.651);
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          display: flex;
          align-items: center;
          > div:nth-of-type(1) {
            padding: 10px;
            > img {
              margin-top: 5px;
              width: 25px;
              height: 25px;
              border-radius: 50%;
            }
          }
          > p {
            //   margin-top: 5px;
            font-size: 12px;
            font-weight: bold;
          }
        }
      }
      &:nth-of-type(odd) {
        margin-top: -30px;
      }
      &:nth-of-type(1) {
        margin-top: 5px;
      }
    }
  }
  > .xiangce {
    display: flex;
    flex-wrap: wrap;
    > div {
      > ul{
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        > li {
            width: 195px;
          > div {
            > img {
              width: 195px;
              height: 146px;
            }
          }
        }
      }
    }
  }
}
.btn {
  width: 100%;
  background-color: #5d79b3;
  text-align: center;
  height: 52.5px;
  line-height: 50px;
  cursor: pointer;
  > span {
    color: white;
    font-size: 22px;
  }
}
.change {
  border-bottom: 3px solid #5d79b3;
  > span {
    color: #5d79b3;
  }
}
.gaibian{
    background-color: gray;
}
</style>